<template>
    <view
        class="tarbar-list"
        :style="{
            background: tabBar.backgroundColor,
            color: tabBar.color,
            'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
            'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0,
            'paddingBottom':`${barPadding}px`
        }">
        <view class="tarbar-list-ul">
            <view class="tarbar-list-li" :class="index == 2 ? 'tarbar-list-li-center' : ''" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
                <!-- <block v-if="index != 2"> -->
                    <view class="tarbar-list-li-icon"><image :src="tabSelect == index ? item.selectedIconPath : item.iconPath" mode=""></image></view>
                    <view class="tarbar-list-li-name">{{ item.text }}</view>
                <!-- </block> -->
                <!-- <block v-else>
                    <view class="tarbar-list-li-icon"><image :src="item.selectedIconPath" mode=""></image></view>
                </block> -->
            </view>
        </view>
    </view>
</template>
<script>
import { mapState,mapMutations } from 'vuex';
export default {
    computed: mapState(['phoneData']),
    props:{
        tabSelect: {
            type:Number,
            default:0
        }
    },
    created(){
        this.getPhoneType();
        this.init();
    },
    data(){
        return {
            selected:1,
            barPadding:0,
            tabBar: {
                color: '#ccc',
                selectedColor: '#E84351',
                borderStyle: '#ccc',
                backgroundColor: '#fff',
                position: 'bottom',
                list: [
                    {
                        pagePath: '/pages/homePage/homePage',
                        iconPath: 'https://cdn.yueyangshuyuan.com/homePage1.png',
                        selectedIconPath: 'https://cdn.yueyangshuyuan.com/homePage2.png',
                        text: '首页'
                    },
                    // {
                    //     pagePath: '/pages/hotSale/hotSale',
                    //     iconPath: 'https://cdn.yueyangshuyuan.com/hot1.png',
                    //     selectedIconPath: 'https://cdn.yueyangshuyuan.com/hot2.png',
                    //     text: '热卖'
                    // },
                    // {
                    //     pagePath: '/pages/releaseBtn/releaseBtn',
                    //     iconPath: '',
                    //     selectedIconPath: 'https://cdn.yueyangshuyuan.com/publish.png'
                    // },
                    {
                        pagePath: '/pages/membersVip/membersVip',
                        iconPath: 'https://cdn.yueyangshuyuan.com/vip1.png',
                        selectedIconPath: 'https://cdn.yueyangshuyuan.com/vip2.png',
                        text: '会员'
                    },
                    {
                        pagePath: '/pages/mine/mine',
                        iconPath: 'https://cdn.yueyangshuyuan.com/mine1.png',
                        selectedIconPath: 'https://cdn.yueyangshuyuan.com/mine2.png',
                        text: '我的'
                    }
                ]
            },
        }
    },
    methods: {
        ...mapMutations(['setTabSelect','getPhoneType']),
        setSelected(index) {
            if(index === this.tabSelect){
                return false;
            }
            this.setTabSelect(index);
            if(index === 1){//会员跳转
                uni.navigateTo({
                    url: this.tabBar.list[index].pagePath
                });
            }else{
                uni.redirectTo({
                    url: this.tabBar.list[index].pagePath
                });
            }
        },
        init(){
            if (this.phoneData.model.indexOf('iPhone') !== -1) {//ios
                if(this.phoneData.screenHeight >= 812){//x
                    this.barPadding = 14;
                }
            } 
        }
    },
    onShow(){
        this.getPhoneType();
        this.init();
    }
}
</script>
<style>
.tarbar {
    width: 100%;
    z-index: 9999;
    position: fixed;
}
.tarbar-list {
    width: 100%;
    height: 120upx;
    background: #4d586f;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
}
.tarbar-list-ul {
    width: 100%;
    height: 100%;
    padding: 20upx 50upx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.tarbar-list-li {
    width: 80upx;
    height: 80upx;
}
.tarbar-list-li-icon {
    width: 50upx;
    height: 50upx;
    margin: 0 auto;
}
.tarbar-list-li-icon image {
    width: 50upx;
    height: 50upx;
}
.tarbar-list-li-name {
    width: 100%;
    text-align: center;
    line-height: 30upx;
    font-size: 20upx;
    height: 30upx;
}
.tarbar-list-li-center {
    /* width: 100upx; */
}
.tarbar-list-li-center .tarbar-list-li-icon,
.tarbar-list-li-center .tarbar-list-li-icon image {
    /* width: 90upx;
    height: 60upx; */
    /* width: 123upx;
    height: 115upx;
    position: relative;
    top: -11upx; */
}
</style>



